<template>
    房间状态:
    <select v-model="stat">
    <option value="-1">请选择</option>
    <option value="0">启用</option>
    <option value="1">禁用</option>
    </select>
    <input type="button" value="查询" @click="show"> 
   <table>
    <thead>
            <tr>
                <td>房间名称</td>
                <td>房间号</td>
                <td>房间状态</td>
                <td>创建时间</td>
                <td>房间类型</td>
                <td>操作</td>
            </tr>
    </thead>
    <tbody>
        <tr v-for="i in info">
                <td>{{ i.R_Name }}</td>
                <td>{{ i.R_Num }}</td>
                <td>{{ i.R_Status ?"启用":"禁用"}}</td>
                <td>{{ i.R_dateTime }}</td>
                <td>{{ i.R_Type }}</td>
                <td>
                    <input type="button" value="删除" @click="shanchu(i.R_id)">
                </td> 
            </tr>
    </tbody>
    <span>
        <a href="#" @click="page('F')">首页</a>
        <a href="#" @click="page('S')">上一页</a>
        <a href="#" @click="page('N')">下一页</a>
        <a href="#" @click="page('W')">尾页</a>
    </span>
   </table>
</template>

<script setup lang="ts">
import { onMounted,ref } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios'


//生命周期函数
onMounted(()=>{
    show()
})
const stat=ref(-1)

//信息
const info=ref([
    {
      "R_id": 1,
      "R_Name": "string",
      "R_Num": "string",
      "R_Status": true,
      "R_Type": "string",
      "R_dateTime": "2024-12-04T01:19:13.615"
    }
])
//分页
const fenye=ref({
index:1,
size:2,
count:3,
pagesize:4,
})
//显示
const show=()=>{
    axios.get("https://localhost:7200/api/RoomStat/GetRoomAll",{
        params:{
            index:fenye.value.index,
            size:fenye.value.size,
            stat:stat.value
        }
    })
    .then(res=>{
        info.value=res.data.Data_info
        fenye.value.count=res.data.Count
        fenye.value.pagesize=res.data.Tolit
    })
}
//删除
const shanchu=(R_id:number)=>{
axios.delete("https://localhost:7200/api/RoomStat/Del",{
    params:{
        id:R_id
    }
})
.then(res=>{
    if(res.data>0){
        alert("删除成功");
        show()
    }else{
        alert("删除失败");
    }
})
}
const page=(a:any)=>{
    switch(a){
        case 'F':
            fenye.value.index=1;
            break;
            case 'S':
            if(fenye.value.index>1){
                fenye.value.index--;
            }
            else
            {
                alert("已经是第一页了")
            }
            break;
            case 'N':
                if(fenye.value.index<fenye.value.count){
                    fenye.value.index++;
                }else
                {
                    alert("已经是最后一页了")                    
                }

            break;
            case 'W':
                fenye.value.index=fenye.value.count;
            break;
    }
    show()
}

</script>

<style scoped>

</style>